<template>
  <div class="bodyall">
    <div>
      <h1 style="margin-left: 100px; padding-top: 20px">我的订单</h1>
      <h5 style="display: flex; width: 100px; justify-content: space-between">
        <div @click="btnCat">购物车</div>
        <div @click="btnhome">首页</div>
      </h5>
    </div>
    <div class="Select">
      <!-- 头部 -->
      <div class="Selectall">
        <div class="selesttest">
          <div></div>
          <div></div>
          <div>商品</div>
          <div>单价</div>
          <div>数量</div>
          <div>小计</div>
          <div>下单时间</div>
        </div>
      </div>
      <!-- 商品列表 -->
      <div class="items" v-for="(item,index) in items" :key="index">
        <div class="item">
          <div></div>
          <div>
            <img class="itemimg" :src="item.picture" />
          </div>
          <div>{{item.Commodityname}}</div>
          <div>￥{{item.Price}}</div>
          <div>{{item.number}}件</div>
          <div>￥{{item.number*item.Price}}</div>
          <div>{{item.time}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {useRouter} from 'vue-router'
import {  onBeforeMount, ref } from 'vue';
import {useStore} from 'vuex'
export default {
  setup(){
    const ischecked=ref(false)
    const router=useRouter()
    const store=useStore()
    // 顶部全选框
    const btncheck=()=>{
      ischecked.value=!ischecked.value
    }
    // 跳转到首页
    const btnhome=()=>{
      router.push('/')
    }
    const btnCat=()=>{
        router.push('/Cart')
    }
    const items=ref()
    onBeforeMount(()=>{
      items.value=store.state.Myorder.xixi
    })
    return{
      ischecked,
      items,
      btnhome,
      btncheck,
      btnCat
    }
  }
};
</script>

<style scoped>
.bodyall {
  background: rgb(233, 232, 232);
  height: 100%;
}
.Select {
  margin-top: 40px;
  width: 80%;
  margin-left: 10%;
}
.bodyall>:nth-child(1){
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.bodyall>:nth-child(1)>:nth-child(2){
  margin-right: 10%;
  cursor: pointer;
  }


/* 头部 */
.Selectall {
  background: white;
  height: 55px;
}
.selesttest {
  line-height: 55px;
  display: flex;
}
.selesttest > :nth-child(1) {
  margin-left: 10px;
  cursor: pointer;
}
.selesttest > :nth-child(2) {
  margin-left: 5px;
  cursor: pointer;
}
.selesttest > :nth-child(3) {
  width: 40%;
  text-align: center;
  cursor: pointer;
}
.selesttest > :nth-child(4) {
  width: 10%;
  cursor: pointer;
}
.selesttest > :nth-child(5) {
  width: 10%;
  cursor: pointer;
}
.selesttest > :nth-child(6) {
  width: 15%;
  cursor: pointer;
}
.selesttest > :nth-child(7) {
  width: 15%;
  text-align: center;
  cursor: pointer;
}
/* 列表 */
.items {
  margin-top: 20px;
  background: white;
  height: 180px;
}
.item {
  line-height: 180px;
  display: flex;
}
.itemimg {
    margin-top: 14%;
  width: 110px;
  height: 110px;
}
.item>:nth-child(1){
    cursor: pointer;
}
.item>:nth-child(2){
    margin-left: -30px;
    width: 25%;
    text-align: end;
}
.item>:nth-child(3){
    width: 15%;
}
.item>:nth-child(4){
    width: 10%;
    text-align: center;
}
.item>:nth-child(5){
    width: 10%;
    margin-left: 44px;
}
.item>:nth-child(6){
    width: 15%;
    margin-left: -10px;
}
.item>:nth-child(7){
    margin-left: 15px;
    width: 15%;
   text-align: center;
    cursor: pointer;
}
.item>:nth-child(5)>button{
    width: 30px;
    height: 20px;
    cursor: pointer;
    background: white;
    border: 0.25px rgb(180, 178, 178) solid;
}
</style>